<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="oak3d.js"></script>
  <script type="text/javascript" src="engine.js"></script>
</head>
<title>Canvas</title>
<body>
  <script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 vColor;

    void main(void){
        gl_FragColor = vColor;
    }
  </script>

  <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;

    void main(void){
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
    }
  </script>

  <canvas id="screen" width="640" height="480"></canvas>
  
  <script type="text/javascript">
    var render = new MyWebGL($("#screen")[0], $("#shader-vs")[0], $("#shader-fs")[0], ["aVertexPosition", "aVertexColor", "uMVMatrix", "uPMatrix"], []);

    // buffer data
    var points = [
        0.0,  1.0, 0.0,
       -1.0, -1.0, 0.0,
        1.0, -1.0, 0.0
    ];

    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ];

    render.bufferVertex(points, "aVertexPosition", 3);
    render.bufferVertex(colors, "aVertexColor", 4);

    var mvMatrix = okMat4Trans(0.0, 0.0, -7.0);
    var pMatrix = okMat4Proj(45, render.viewWidth / render.viewHeight, 0.1, 100.0);

    render.uniformMatrix(mvMatrix.toArray(), "uMVMatrix");
    render.uniformMatrix(pMatrix.toArray(), "uPMatrix");

    render.draw();
  </script>

</body>
</html>
